<template>
    <div class="stats-page">
        <div class="stats-header">图书馆数据统计</div>
        <el-row :gutter="24" class="stats-cards">
            <el-col :span="6">
                <el-card>
                    <div class="stat-title">图书总数</div>
                    <div class="stat-value">{{ stats.books }}</div>
                </el-card>
            </el-col>
            <el-col :span="6">
                <el-card>
                    <div class="stat-title">读者总数</div>
                    <div class="stat-value">{{ stats.readers }}</div>
                </el-card>
            </el-col>
            <el-col :span="6">
                <el-card>
                    <div class="stat-title">借阅总数</div>
                    <div class="stat-value">{{ stats.borrows }}</div>
                </el-card>
            </el-col>
            <el-col :span="6">
                <el-card>
                    <div class="stat-title">未归还</div>
                    <div class="stat-value">{{ stats.unreturned }}</div>
                </el-card>
            </el-col>
        </el-row>
        <el-card style="margin-top:32px;">
            <div class="stat-title">热门图书借阅排行</div>
            <el-table :data="topBooks" style="width:100%;margin-top:12px;" border stripe>
                <el-table-column prop="title" label="书名" min-width="180" />
                <el-table-column prop="author" label="作者" min-width="120" />
                <el-table-column prop="borrowCount" label="借阅次数" min-width="100" />
            </el-table>
        </el-card>
        <el-card style="margin-top:32px;">
            <div class="stat-title">活跃读者排行</div>
            <el-table :data="topReaders" style="width:100%;margin-top:12px;" border stripe>
                <el-table-column prop="name" label="姓名" min-width="120" />
                <el-table-column prop="username" label="账号" min-width="120" />
                <el-table-column prop="borrowCount" label="借阅次数" min-width="100" />
            </el-table>
        </el-card>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import axios from 'axios'

const stats = ref({ books: 0, readers: 0, borrows: 0, unreturned: 0 })
const topBooks = ref([])
const topReaders = ref([])

const fetchStats = async () => {
    const res = await axios.get('/stats/overview')
    stats.value = res.data
}
const fetchTopBooks = async () => {
    const res = await axios.get('/stats/top-books')
    topBooks.value = res.data
}
const fetchTopReaders = async () => {
    const res = await axios.get('/stats/top-readers')
    topReaders.value = res.data
}
onMounted(() => {
    fetchStats()
    fetchTopBooks()
    fetchTopReaders()
})
</script>

<style scoped>
.stats-page {
    padding: 24px;
}

.stats-header {
    font-size: 22px;
    font-weight: bold;
    margin-bottom: 24px;
}

.stats-cards {
    margin-bottom: 24px;
}

.stat-title {
    font-size: 16px;
    color: #666;
    margin-bottom: 8px;
}

.stat-value {
    font-size: 28px;
    font-weight: bold;
    color: #409EFF;
}
</style>
